<template>
	<div>
		<div class="head">
			<a @click="$router.push({path: '/Order'})" class="return"></a>
			<span>{{$t('Address.v1')}}</span>
			<span class="add" v-show="list.length != 0" @click="$router.push({path: '/AddAddress'})">{{$t('Address.v2')}}</span>
		</div>
		<div class="overlay">
			<div class="overlay-content scrolling">

				<div class="increase2" @click="defaultList(item.id)" v-for="item,index of list" :key="item.id">
					<div class="hd">{{item.username}} <span>{{item.phoneNumber}}</span></div>
					<div class="bd"><span v-show="item.isDefault == 1" class="default">{{$t('Address.v3')}}</span>{{item.province}}{{item.city}}{{item.district}}{{item.street}}</div>
					<div class="compile" @click.stop="$router.push({path: '/UpdateAddress',query: {id:item.id}})">{{$t('Address.v4')}}</div>
				</div>

				<div class="add2" v-show="list.length == 0">
					<p>{{$t('Address.v5')}}~</p>
					<van-button type="primary" size="normal" style="background:#3ca76d;" to="/AddAddress">{{$t('Address.v6')}}</van-button>
				</div>

			</div>
		</div>
	</div>
</template>

<script>
	import { recreation } from './../../utils/api';
	let _this;
	export default {
		name: 'Address',
		data() {
			return {
				list: []
			}
		},
		beforeCreate() {
			_this = this;
		},
		mounted() {
			recreation.getSelect().then(res => {
				if(res.code == 200) {
					this.list = res.data;
				}
				Toast({
					message: res.msg
				});
			})

		},
		methods: {
			defaultList(id) {
				recreation.getSetDefault({
					'id': id
				}).then(res => {
					if(res.code == 200) {
						this.$router.push({
							path: '/Order'
						})
					}
				})
			}
		}
	}
</script>

<style lang="less" scoped="scoped">
	.overlay {
		background: rgb(245, 245, 245);
	}

	.head {
		background: white;
		color: black;
	}

	.head .return:after {
		border-color: #000;
	}

	.add {
		position: absolute;
		right: 10px;
		top: 0;
		font-size: 14px;
		color: #3ca76d;
	}

	.add2 {
		color: #333;
		text-align: center;
		width: 80%;
		margin: 0 auto;
		p {
			padding: 50% 0 16px 0;
		}
	}

	.increase2 {
		position: relative;
		background: #fff;
		color: #333;
		padding: 10px 80px 10px 10px;
		margin-bottom: 1px;
		margin-top: 10px;
		.hd {
			span {
				color: #999;
			}
		}
		.bd {
			font-size: 13px;
		}
		.default {
			color: #fff;
			background: #3ca76d;
			padding: 0 6px;
			margin-right: 6px;
			font-size: 12px;
		}
		.compile {
			position: absolute;
			right: 0;
			top: 22px;
			color: #999;
			border-left: 1px solid #dedede;
			font-size: 14px;
			padding: 2px 20px;
		}
	}
</style>
